@media screen and (max-width:1200px) {
    #header .header-box {
        position: relative;
    }

    .menu {
        display: none;
    }

    .menu-btn {
        display      : block;
        padding-right: 15px;
        position     : absolute;
        top          : 20px;
        right        : 5px;
        cursor       : pointer;
    }

    .bar1,
    .bar2,
    .bar3 {
        height          : 2px;
        background-color: #666;
        margin          : 5px 0;
        transition      : 0.4s;
    }

    .bar1 {
        width: 20px;
    }

    .bar2 {
        width: 30px;
    }

    .bar3 {
        width: 20px;
    }
    .change .bar1{
        transform: rotate(-45deg) translate(-5px, 5px);
    }
    .change .bar2 {
        opacity: 0;
    }
    .change .bar3{
        transform: rotate(45deg) translate(-5px, -5px);
    }
    #header .menu ul li{
        float: none;
    }

    #header .menu ul{
        margin: 60px 0 20px 0;
        overflow-y: auto;
        border-top: 1px solid #999;
    width: 100%;
    }
    #header .menu li{
        border-bottom: 1px solid #999;
    }
    #header .menu li a{
        padding: 10px;
        text-align: left;
    }


}

@media screen and (max-width:767px) {
    .banner{height: 400px;}
    .bannerdivright .bbb,.index-need .index-need-box .fr-box{display: none;}
    .banner .bannerdivleft{width: 100%;}
    .banner .bannerdivleft h1{font-size: 2.4rem;line-height:4rem}
    .banner .bannerdivleft h2{font-size: 2rem;margin-top: 3%;}
    .index-case .index-case-fl, .index-case .index-case-fr{width: 100%;margin: 0;}
    .index-service li,.index-ensure ul li,.index-advantage ul li{width: 100%;}
    .index-ensure ul,.index-advantage ul{flex-wrap: wrap;}
    .index-ensure ul li,.index-advantage ul li{margin-bottom: 3%;}
    .index-advantage ul li{margin-top: 20%;}
    .index-advantage{padding-bottom: 5%;}
    .index-faq li{float: none;width: 90%;padding: 0  5%;margin-bottom: 8%;}
    .index-need .index-need-box .fl-box{width: 100%;}
    .index-need .index-need-box{padding:5% 0;}
    .index-flow .swiper-slide{width: 33%;margin-right: 2%;padding: 2%;}
    .index-hot-news li{float: none;width:auto;margin-right: 2.5%;}
    #footer .footer-warp .left,#footer .footer-warp .right{width: 100%;float: none;}
    #footer .footer-warp .left{display: flex;justify-content: space-between;}
    #footer .footer-warp .left dl{float: none;margin: 0;}
    #footer .footer-warp{width: 85%;}
    #footer .footer-warp .right,#footer .footer-warp .right .icon,#footer .footer-warp .right .line{text-align: center;}
    #footer .footer-warp .right .icon{margin-top: 5%;}
    .page-banner h2{font-size: 30px;width: 90%;}
    .about li, .about .pic-list .li{width: auto;float: none;margin-bottom: 5%;}
    .about li:nth-child(even), .about .pic-list .li:nth-child(even){width: auto;margin-left: 0;}
    .about-list .warp ul{flex-direction:column;display: flex;}
    .about-list-box .img img{width: 50%;}
    .service .service-warp .dd{width: 100%;}
    .list-app .tab-nav ul{flex-wrap: wrap;}
    .list-case-app li{flex-basis: 85%;text-align: center;}
    .case-popup .popup-warp{width: 90%;margin-left:-45%;margin-top: -260px;}
    .case-popup .popup-warp .warps-c .info{font-size: 16px;}
    .case-popup .popup-warp .warps-c li{font-size: 14px;margin-bottom: 0;}
    .list-case-web li,.list-video li{flex-basis:96%}
    .iframe-warp{width: 90%;left: 5%;}
    .iframe-warp .iframe-h{min-height: 120px;}
    .list-client{display: block;text-align: center;}
    .list-client img{width: 50%;text-align: center;}
    .content-blog .infos img{width: 100%;}
    .content-hot .content-hot-warp ul{display: block;}
    .contact .left,.contact .right{width: 100%;margin: 0 0 5% 0;}
    .index-works ul{display: block;}
    .index-works li h3{font-weight: normal;}
    #footer .footer-warp .left，#footer .footer-warp .right{float: none;}
    .index-concept ul li{display: block;text-align: center;}
    .index-concept ul li img{width: 35%;margin-bottom: 5px;}
    .index-concept ul li p{font-size: 18px;font-weight: normal;}
    #footer .footer-warp .left{font-size: 16px;}
    #footer .footer-warp .right{margin-bottom: 20px;}
    #footer .footer-warp .right,#footer .footer-warp .right .icon,#footer .footer-warp .left{text-align: left;}
    #footer .footer-warp .copy{margin-top: 8%;font-size: 12px;color: #472514;}
}